import { useState, useEffect } from 'react'
import { RadioGroup, Input, Button, Radio, MessagePlugin } from 'tdesign-react'
import moment from 'moment'

import { apis, ApiRequest } from '@/service'
import '../index.less'
import { useTranslation } from 'react-i18next'

const {
  practiceService: {
   getUserList,
   insertNote,
  }
 } = apis

const AddNote = (props: any) => {

  const {
    onAddSuccess,
    onAuthorChange,
  } = props

  const { t } = useTranslation(['webGames'])
  const [userList, setUserList] = useState<UserType[]>([])
  const [currentAuthor, setCurrentAuthor] = useState<UserType>({
    userName: '',
    userId: '',
    userAge: 0,
    userRank: 'customer',
    userSex: 0,
  })
  const [inputValue, setInputValue] = useState<string>('')

  useEffect(() => {
    getUserListFnc()
  }, [])

  /**
   * 获取用户列表
   */
  const getUserListFnc = () => {
    ApiRequest({ api: getUserList }).then((res: any) => {
      const { code = -1, data = [], note = '' } = res
      if (code > 0) {
        setUserList(data)
        setCurrentAuthor(data[0])
        onAuthorChange(data[0].userName)
      } else {
        MessagePlugin.error({
          content: note,
          placement: 'top-right',
          duration: 2000
        })
      }
    })
  }

  const onUserChange = (event: any) => {
    let author = userList.filter((item: UserType) => item.userId == event)[0]
    setCurrentAuthor(author)
    onAuthorChange(author.userName)
  }

  const onSubmit = () => {
    if (currentAuthor.userName === '') {
      MessagePlugin.info({
        content: `${t('practice.noteBorad.selectTip')}`,
        placement: 'top-right',
        duration: 2000
      })
      return
    }
    if (inputValue === '') {
      // TODO 提示别人，要输入值
      MessagePlugin.info({
        content: `${t('practice.noteBorad.inputTip')}`,
        placement: 'top-right',
        duration: 2000
      })
      return
    }
    const _noteItem = {
      author: currentAuthor.userName,
      content: inputValue,
      datetime: moment().format('YYYY-MM-DD HH:mm:ss'),
    }
    ApiRequest({ api: insertNote, params: _noteItem }).then((res: any) => {
      const { code = -1, status = '0', note = '' } = res
      if (code > 0) {
        onAddSuccess && onAddSuccess()
        MessagePlugin.success(note, 2000)
      } else {
        MessagePlugin.error({
          content: note,
          placement: 'top-right',
          duration: 2000
        })
      }
    })
  }

  return <div className='input-block'>
  <div className='select-user-label'>{t('practice.noteBorad.selectTip')}</div>
  <RadioGroup className='select-user-radio' onChange={onUserChange} value={currentAuthor.userId}>
    {userList.map((item: UserType) => {
      return <Radio value={item.userId} key={item.userId}>{item.userName}</Radio>
    })}
  </RadioGroup>
  <Input className='input-block-input' clearable placeholder={t('practice.noteBorad.inputTip')} onChange={(value) => { setInputValue(value) }} />
  <Button className='input-block-button' onClick={onSubmit}>{t('practice.noteBorad.submitButton')}</Button>
</div>
}
export default AddNote